<template>
  <div>
    <div class="banner">
      <img :src="construction_banner" alt="杭州风鼎有限公司" />
      <div style="position:absolute;width:1300px;bottom:7%;left:50%;;margin-left:-650px;">
        <svg-icon icon-class="bigdata" :style="style"></svg-icon>
      </div>
      <div style="position:absolute;width:1300px;top:47%;left:50%;margin-left:-650px;">
        <svg-icon icon-class="jsnr" :style="jsnrStyle"></svg-icon>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main">
        <h3 class="title">情报信息管理系统</h3>
        <p
          class="introduce animated fadeInRight"
        >实现情报信息智能化管理，动态掌握各类情报信息，智能收集全市各维稳单位逐级上报的情报信息，辅助工作人员生成各类情报研判文稿，供领导决策，并将结果发送给相关单位。</p>
        <div class="platform">
          <img :src="sys_paltom" alt="情报信息管理系统" />
        </div>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main">
        <div class="ypyj clearfix">
          <img :src="ypyj_img" alt />
          <div class="ypyj-box">
            <h3>研判预警系统</h3>
            <p>在对涉稳信息收集、初步研判的基础上，通过数据比对碰撞、智能建模等技术，定制多条件触发预警模型，实现对重点群体、重大事件、重大节点等内容的预警。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="magic-section circle-bg" style="background-color:#EFF3FD;padding:100px 0">
      <div class="magic-main" style="position:relative">
        <div class="small-circle" style="left:390px;top:-50px;"></div>
        <div class="small-circle" style="bottom:-50px;right:-290px;"></div>
        <div class="middle-circle" style="left:-90px;top:150px;"></div>
        <div class="middle-circle" style="top:-70px;right:-140px;"></div>
        <a-row type="flex" justify="space-around" :gutter="60" class="politics">
          <a-col :span="3">
            <div class="circle" style="line-height:45px;padding:45px 0;">
              数据统计
              <br />分析
            </div>
          </a-col>
          <a-col :span="3">
            <div class="circle" style="line-height:45px;padding:45px 0;bottom:105px;">
              三级预警
              <br />模型
            </div>
          </a-col>
          <a-col :span="3">
            <div class="circle" style="top:75px;">视频监控</div>
          </a-col>
          <a-col :span="3">
            <div class="circle" style="bottom:60px">人脸识别</div>
          </a-col>
          <a-col :span="3">
            <div class="circle" style="top:20px">定位分析</div>
          </a-col>
          <a-col :span="3">
            <div class="circle" style="top:110px">车牌识别</div>
          </a-col>
          <a-col :span="3">
            <div class="circle" style="bottom:50px">轨迹分析</div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="magic-section analysis">
      <img :src="honeycombBg" alt class="honeycomb-bg" />
      <div class="magic-main">
        <div class="analysis-list">
          <a-row type="flex" justify="space-between" :gutter="30">
            <a-col :span="4" v-for="item in analysisList" :key="item.id" class="analysis-list-li">
              <h3>{{item.title}}</h3>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main">
        <h3 class="title">重点涉稳目标管控系统</h3>
        <p
          class="introduce animated fadeInRight"
        >通过数据采集，对重点涉稳目标基础数据进行分类存储管理。并可与GIS地图结合，将重点人、重点部位等信息进行可视化展示，为维稳人员研判决策时提供数据支撑。</p>
        <div class="target-control">
          <a-row type="flex" justify="space-between" :gutter="75">
            <a-col :span="8" v-for="item in targetControlList" :key="item.id ">
              <div class="target-control-li">
                <div class="target-control-svg">
                  <img :src="item.url" alt />
                </div>
                <div class="target-control-text">
                  <h4>{{item.title}}</h4>
                  <p>{{item.text}}</p>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main">
        <div class="ypyj clearfix">
          <img :src="ptaq_img" alt />
          <div class="ypyj-box">
            <h3>平台安全系统</h3>
            <p>平台安全系统对安全审计、资源授权、字典维护、日志等内容进行统一管理。并可在将平台监测结果过进行统计分析，在大屏上进行可视化展示。</p>
          </div>
        </div>
        <div>
          <a-row type="flex" justify="space-between" :gutter="52" class="ptaq">
            <a-col :span="8" v-for="item in ptaq_list" :key="item.id" class="ptaq-list-li">
              <div>
                <img :src="item.url" alt />
                <h3>{{item.title}}</h3>
                <ul>
                  <li v-for="(obj,index) in item.list" :key="index">{{obj}}</li>
                </ul>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import internet from "@/assets/images/internet.png";
import ypyj_img from "@/assets/images/main_info_b.png";
import ptaq_img from "@/assets/images/main_info_c.png";
import platform1 from "@/assets/images/platform1.png";
import platform2 from "@/assets/images/platform2.png";
import platform3 from "@/assets/images/platform3.png";
import target1 from "@/assets/images/target1.png";
import target2 from "@/assets/images/target2.png";
import target3 from "@/assets/images/target3.png";
import target4 from "@/assets/images/target4.png";
import target5 from "@/assets/images/target5.png";
import target6 from "@/assets/images/target6.png";
export default {
  computed: {
    jsnrStyle() {
      let width = 392 * (document.body.offsetWidth / 1920);
      let height = 64 * (document.body.offsetWidth / 1920);
      let left = -14 * (document.body.offsetWidth / 1920);
      return {
        width: width,
        height: height,
        position: "relative",
        left: left
      };
    },
    style() {
      let width = 553 * (document.body.offsetWidth / 1920);
      let height = 64 * (document.body.offsetWidth / 1920);
      let right = -70 * (document.body.offsetWidth / 1920);
      return {
        width: width,
        height: height,
        float: "right",
        position: "relative",
        right: right
      };
    }
  },
  data() {
    return {
      ypyj_img,
      ptaq_img,
      honeycombBg: this.$global.IMG_URL + "/honeycomb-bg.png",
      ptaq_list: [
        {
          id: 1,
          url: platform1,
          title: "应用安全审计",
          list: ["日志采集", " 日志分析", "日志监测"]
        },
        {
          id: 2,
          url: platform2,
          title: "统一用户管理",
          list: ["统一认证", " 统一登录", "统一授权"]
        },
        {
          id: 3,
          url: platform3,
          title: "统一权限管理",
          list: ["数据安全等级设置", " 资源授权管理", "红名单机制"]
        }
      ],
      analysisList: [
        {
          id: 1,
          title: "重点部位预警"
        },
        {
          id: 2,
          title: "事件预警"
        },
        {
          id: 3,
          title: "重点人员预警"
        },
        {
          id: 4,
          title: "重点车辆预警"
        },
        {
          id: 5,
          title: "重点节点预警"
        }
      ],
      targetControlList: [
        {
          id: 1,
          url: target1,
          title: "人员信息管理",
          text: "根据身份证号，自动获取重点人员信息，可定期更新管理。"
        },
        {
          id: 2,
          url: target2,
          title: "人员关系分析",
          text:
            "对重点人员的直系、旁系、常联系人等关系进行深度挖掘，以图表的形式进行汇总统计。"
        },
        {
          id: 3,
          url: target3,
          title: "管控级别设定",
          text:
            "对重点人进行管控等级设定，对不同等级建立不同的数据模型，从而达到重点人多级预警管理的功能。"
        },
        {
          id: 4,
          url: target4,
          title: "活动轨迹分析",
          text:
            "通过从大数据中心获取相关轨迹数据，如票务信息、高速卡口信息、旅店住宿信息、网吧上网信息等，结合数据模型，进行预警推送和数据分析。"
        },
        {
          id: 5,
          url: target5,
          title: "历史事件分析",
          text:
            "系统自动统计汇总该重点人历史涉稳事件，以时间轴的方式进行展现，辅助工作人员对该人员进行研判。"
        },
        {
          id: 6,
          url: target6,
          title: "同行分析",
          text:
            "通过数据建模， 将从大数据中心获取的同行轨迹数据进行分析和预警，以时间轴的方式进行呈现。"
        }
      ],
      internet,
      construction_banner: this.$global.IMG_URL + "/construction_banner.png",
      sys_paltom: this.$global.IMG_URL + "/sys_paltom.png"
    };
  }
};
</script>
<style lang="stylus" scoped>
/deep/ .analysis .analysis-list .analysis-list-li h3 {
  font-size: 22px;
  min-height: 200px;
  margin-left: 12px;
}

.ptaq {
  margin-bottom: 100px;

  .ptaq-list-li {
    text-align: center;

    div {
      &:hover {
        transition: 0.5s linear;
        transform: scale(1.1);
      }

      border-radius: 8px;
      width: 374px;
      margin: 0 auto;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
      padding: 24px 0;
    }

    h3 {
      font: 300 30px / 42px '微软雅黑';
      color: #333333;
      margin: 8px 0 18px;
    }

    li {
      color: #696969;
      font: 300 22px / 48px '微软雅黑';
    }

    img {
      width: 174px;
    }
  }
}

.target-control {
  margin-top: 120px;
  margin-bottom: 80px;

  .target-control-li {
    display: flex;
    margin-bottom: 90px;

    .target-control-svg {
      width: 90px;
    }

    .target-control-text {
      flex: 1;
      padding-left: 16px;

      h4 {
        font: 300 25px / 1.5 '微软雅黑';
        color: #333;
        margin-bottom: 8px;
      }

      p {
        color: #696969;
        font: 300 18px / 1.5 '微软雅黑';
        text-align: justify;
      }
    }
  }
}

.ypyj {
  width: 1200px;
  margin: 140px auto 120px;

  img {
    float: left;
    width: 354px;
  }

  .ypyj-box {
    margin-left: 110px;
    float: left;

    h3 {
      margin: 36px 0;
      color: #333;
      font: 300 50px / 1.5 '微软雅黑';
    }

    p {
      width: 550px;
      text-align: justify;
      color: #696969;
      font: 300 22px / 1.5 '微软雅黑';
    }
  }
}
</style>